<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.cdvtc.forum_system.model.User" %><%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2025/6/14
  Time: 16:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校园论坛 - 连接你我他<c:if test="${not empty sessionScope.currentUser}">${sessionScope.currentUser}</c:if></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="css/forum_system.css">
</head>
<body>
<c:set var="user" value="${sessionScope.currentUser}" scope="session"/>
<c:set var="realUser" value="${user['user_nickname'].length() > 0 ? user['user_nickname'].substring(0,1) : '未登录'}" scope="page"/>
<!-- 顶部导航栏 -->
<div class="navbar">
  <div class="logo">
    <i class="fas fa-comments"></i>
    <h1>校园<span>论坛</span></h1>
  </div>
  <div class="user-info">
    <div class="user-menu">
      <div class="user-avatar" id="userAvatar">
        <c:if test="${not empty sessionScope.currentUser.user_account}">
          <span style="font-size: 32px"><c:out value="${realUser}" /></span>
        </c:if>
        <c:if test="${empty sessionScope.currentUser.user_nickname}">
          <span>未登录</span>
        </c:if>
      </div>
      <div class="dropdown" id="userDropdown">
        <c:if test="${not empty sessionScope.currentUser}">
          <a href="#"><i class="fas fa-user"></i><c:out value="${user['user_nickname']}"/></a>
          <a href="#" id="editProfileBtn"><i class="fas fa-cog"></i> 修改个人信息</a>
          <a href="${pageContext.request.contextPath}/logout"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
        </c:if>
        <c:if test="${empty sessionScope.currentUser}">
          <a href="${pageContext.request.contextPath}/login"><i class="fas fa-user"></i> 登录</a>
        </c:if>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <!-- 左侧边栏 -->
  <div class="sidebar">
    <button class="new-post-btn" onclick="window.location.href='${pageContext.request.contextPath}/forum_post_create.jsp'">
      <i class="fas fa-plus"></i> 发表新帖
    </button>
    <div class="board-list">
      <div class="board-item active" data-board="food">
        <i class="fas fa-utensils"></i>
        <div class="board-name">美食天地</div>
        <div class="post-count">128</div>
      </div>
      <div class="board-item" data-board="campus">
        <i class="fas fa-laugh-beam"></i>
        <div class="board-name">校园趣事</div>
        <div class="post-count">342</div>
      </div>
      <div class="board-item" data-board="study">
        <i class="fas fa-book"></i>
        <div class="board-name">学习交流</div>
        <div class="post-count">567</div>
      </div>
      <div class="board-item" data-board="sports">
        <i class="fas fa-running"></i>
        <div class="board-name">运动健身</div>
        <div class="post-count">89</div>
      </div>
    </div>
  </div>

  <!-- 主内容区 -->
  <div class="main-content">
    <div class="content-header">
      <div class="board-title">
        <i class="fas fa-utensils"></i>
        <h2 id="currentBoard">美食天地</h2>
      </div>
      <div class="sort-options">
        <select>
          <option>最新发布</option>
          <option>热门帖子</option>
          <option>最多评论</option>
        </select>
      </div>
    </div>

    <!-- 帖子列表 -->
    <div class="post-list">
      <!-- 帖子1 -->
      <div class="post-card">
        <div class="post-header">
          <div class="post-author">
            <div class="author-avatar">李</div>
            <div class="author-info">
              <div class="author-name">李同学</div>
              <div class="post-time">2小时前 · 美食天地</div>
            </div>
          </div>
          <div class="post-title">二食堂新开的麻辣烫也太好吃了吧！</div>
          <div class="post-content">
            今天中午去二食堂尝了新开的麻辣烫，汤底非常鲜美，食材新鲜，特别是他们家的秘制酱料，简直绝了！强烈推荐大家去试试！
          </div>
          <div class="post-tags">
            <div class="tag">#食堂推荐</div>
            <div class="tag">#麻辣烫</div>
            <div class="tag">#美食分享</div>
          </div>
          <div class="post-stats">
            <div>浏览: 324</div>
            <div>评论: 28</div>
            <div>收藏: 45</div>
          </div>
        </div>
        <div class="post-actions">
          <div class="action-btn">
            <i class="far fa-thumbs-up"></i>
            <span>点赞(86)</span>
          </div>
          <div class="action-btn">
            <i class="far fa-thumbs-down"></i>
            <span>点踩(2)</span>
          </div>
          <div class="action-btn">
            <i class="far fa-comment"></i>
            <span>评论</span>
          </div>
          <div class="action-btn">
            <i class="far fa-bookmark"></i>
            <span>收藏</span>
          </div>
          <div class="action-btn">
            <i class="fas fa-flag"></i>
            <span>举报</span>
          </div>
        </div>
      </div>

      <!-- 帖子2 -->
      <div class="post-card">
        <div class="post-header">
          <div class="post-author">
            <div class="author-avatar">王</div>
            <div class="author-info">
              <div class="author-name">王同学</div>
              <div class="post-time">5小时前 · 美食天地</div>
            </div>
          </div>
          <div class="post-title">校外必吃小吃街TOP5推荐</div>
          <div class="post-content">
            在校三年，吃遍学校周边所有小吃，今天给大家推荐我心中的TOP5：1. 张阿姨烤冷面 2. 老李煎饼果子 3. 胖子烧烤 4. 小刘奶茶 5. 陈记肉夹馍...
          </div>
          <div class="post-tags">
            <div class="tag">#小吃推荐</div>
            <div class="tag">#美食攻略</div>
          </div>
          <div class="post-stats">
            <div>浏览: 587</div>
            <div>评论: 43</div>
            <div>收藏: 67</div>
          </div>
        </div>
        <div class="post-actions">
          <div class="action-btn">
            <i class="far fa-thumbs-up"></i>
            <span>点赞(142)</span>
          </div>
          <div class="action-btn">
            <i class="far fa-thumbs-down"></i>
            <span>点踩(5)</span>
          </div>
          <div class="action-btn">
            <i class="far fa-comment"></i>
            <span>评论</span>
          </div>
          <div class="action-btn">
            <i class="far fa-bookmark"></i>
            <span>收藏</span>
          </div>
          <div class="action-btn">
            <i class="fas fa-flag"></i>
            <span>举报</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 个人信息弹窗 -->
<div class="profile-modal" id="profileModal">
  <div class="modal-content">
    <div class="modal-header">
      <div class="close-btn" id="closeModal">
        <i class="fas fa-times"></i>
      </div>
      <h3>修改个人信息</h3>
      <div class="avatar-container">
        <div class="modal-avatar"></div>
      </div>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" value="张三">
      </div>
      <div class="form-group">
        <label for="email">电子邮箱</label>
        <input type="email" id="email" value="zhangsan@example.com">
      </div>
<%--      <div class="form-group">--%>
<%--&lt;%&ndash;        <label for="bio">个人简介</label>&ndash;%&gt;--%>
<%--&lt;%&ndash;        <textarea id="bio">${sessionScope.currentUser.user_bio}</textarea>&ndash;%&gt;--%>
<%--      </div>--%>
<%--      <div class="form-group">--%>
<%--        <label for="major">专业</label>--%>
<%--        <select id="major">--%>
<%--          <option ${sessionScope.currentUser.user_major == '计算机科学与技术' ? 'selected' : ''}>计算机科学与技术</option>--%>
<%--          <option ${sessionScope.currentUser.user_major == '电子信息工程' ? 'selected' : ''}>电子信息工程</option>--%>
<%--          <option ${sessionScope.currentUser.user_major == '机械工程' ? 'selected' : ''}>机械工程</option>--%>
<%--          <option ${sessionScope.currentUser.user_major == '工商管理' ? 'selected' : ''}>工商管理</option>--%>
<%--          <option ${sessionScope.currentUser.user_major == '英语' ? 'selected' : ''}>英语</option>--%>
<%--        </select>--%>
<%--      </div>--%>
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline" id="cancelEdit">取消</button>
      <button class="btn btn-primary" id="saveProfile">保存更改</button>
    </div>
  </div>
</div>

<script src="js/forum_system.js"></script>
</body>
</html>
